<template>
  <div class="app-container">
    <el-form :inline="true" :model="course" class="demo-form-inline">
  <el-form-item label="课程类别">
      <el-select v-model="value" placeholder="请选择" @change="blur()">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
       <el-select v-model="valu" placeholder="请选择">
    <el-option
      v-for="item in substr"
      :key="item.value"
      :label="item.title"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
      <el-input v-model="courseQuery.title" placeholder="课程标题"></el-input>
  </el-form-item>
   <el-form-item>
         <el-select v-model="val" placeholder="请选择">
    <el-option
      v-for="item in courseQuery"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search"  @click="getList()">查询</el-button>
    <el-button @click="remove">清空</el-button>
  </el-form-item>
</el-form>
<el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        align="center"
        width="60">
        <template slot-scope="scope">{{(page-1)*limit+scope.$index+1}}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="课程信息"
        align="center"
        width="400">
        <template slot-scope="scope"> <div><img :src="scope.row.cover" alt="" width="130px">
            <span class="title">{{scope.row.title}}</span>  <span class="keshi">{{scope.row.lessonNum}}课时</span>
            </div> </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="创建时间"
        align="center"
        width="120">
        <template slot-scope="scope">{{scope.row.gmtCreate.substr(0,10)}} </template>
      </el-table-column>
      <el-table-column
        prop="intro"
        width="150"
        align="center"
        label="发布时间">
        <template slot-scope="scope">{{scope.row.gmtModified.substr(0,10)}} </template>
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="价格"
        align="center"
        width="160">
        <template slot-scope="scope">{{scope.row.price==0?'免费':"￥"+scope.row.price.toFixed(2)}} </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        align="center"
        label="付费学员"
        width="60">
        <template slot-scope="scope">
            {{scope.row.buyCount}}
             </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        align="center"
        label="课程状态"
        width="100">
        <template slot-scope="scope"> <el-tag v-if="scope.row.status=='Draft'">未发布</el-tag>
<el-tag type="success" v-else>已发布</el-tag></template>
      </el-table-column>
       <el-table-column
        prop="address"
        align="center"
        label="操作"
        width="300">
        <template slot-scope="scope">
          <router-link :to="`/course/import/${scope.row.id}`">
          <el-button size="mini" icon="el-icon-edit" type="primary">修改</el-button>
          </router-link>
          
        <el-button size="mini" icon="el-icon-edit" type="danger" @click="delData(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import courseApi from '@/api/course'
import classApi from '@/api/class'
import teacherApi from '@/api/teacher'
  export default {
    data() {
      return {
        formInline: {
          user:'',
          region:'',
          time:''

        },
          list:null,//当前列表所需要的数据
          listLoading: true,//转loading效果
          page:1, //当前页数
          limit:10, // 每页显示多少数据
          courseQuery : {}, //条件查询对象  
          total:0, //总共的数据数量
          options: [], //一级菜单
          course:{}, //获取讲师
          substr:[],//二级菜单
          value:"",
          val:"",
          valu:""
      }
    },
    created(){
      this.getList();
      this.classList();
      this.teacherList();
    },
    methods: {
     getList(page=1){
      //  获取当前页数
       this.page = page;
       this.listLoading = true;
       courseApi.getList(this.page,this.limit,this.courseQuery).then(res=>{
        //  将数据保存到list中
        this.list = res.data.items
        // 获取到数据长度保存到total中
        this.total = res.data.totalCount
        // 将loading失去效果
       this.listLoading = false;
       }).catch(err=>{
         this.$message({
           message:'错误',
           type:"error"
         })
       })
      
      
      
      },
      handleCurrentChange(val) {
        // 调用getlist并传入当前页数的值
        this.getList(val)
      },
      // 获取课程分类
      classList(){
        classApi.getList().then(res=>{
          this.options = res.data
        })
      },
      // 根据父级获取到所选择的数据
      blur(){
        classApi.getList().then(res=>{
          // console.log(res);
          console.log(this.value);
          for(let i = 0;i<res.data.length;i++){
            if(res.data[i].id==this.value){
              this.substr = res.data[i].children
              this.valu=''
            }
          }
        })
      },
      // 获取讲师列表
      teacherList(){
        teacherApi.teacherList().then(res=>{
          this.courseQuery= res.data;
        })
      },
      remove(){
        // 将查询到的数据清空
        this.courseQuery={},
        // 重新赋值
        this.getList()
      },
      delData(id){
        courseApi.delById(id).then(res=>{
           this.$confirm('是否要删除课程', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getList()
        })
        })
      }
    }
  }
</script>
<style scoped>
span.title{
    display: inline-block;
    float: right;
    margin-right: 140px;
    text-align: center;
    color: blue;
}
img{
    float: left;
    margin-left: 10px;
}
.keshi{
    float: right;
    margin-right: 150px;
    margin-top: 30px;
}
.block{
    text-align: center;
    margin-top: 20px;
}
</style>